<template>
    <div class="aside-list" :class="{ 'active': props.active }">
        <span class="truncate"><slot></slot></span>
        <!-- 这里需要对两个按钮加上stop防止事件向上冒泡,不然点击了也会切换过去 -->
        <el-button class="ml-auto px-1" text type="primary" size="small" @click.stop="emit('edit')">
            <el-icon :size="12"><Edit /></el-icon>
        </el-button>
        <!-- 外面套一层span标签,防止事件冒泡,因为内层的confirm没有用 -->
        <span @click.stop="()=> {}">
            <el-popconfirm 
                title="是否要删除该分类?"
                confirm-button-text="确认"
                cancel-button-text="取消"
                @confirm="emit('delete')"
            >
                <template #reference>
                    <el-button class="px-1" text type="primary" size="small">
                        <el-icon :size="12"><Close /></el-icon>
                    </el-button>
                </template>
            </el-popconfirm>
        </span>
    </div>
</template>

<script setup>

// 父组件传递的参数,显示激活状态的那一栏
const props = defineProps({
    active:{
        type: Boolean,
        default: false
    }
})
// 暴露点击事件出去
const emit = defineEmits(['edit', 'delete'])
</script>

<style scoped>
.aside-list{
    border-bottom: 1px solid #f4f4f4;
    cursor: pointer;
    @apply flex items-center p-3 text-sm text-gray-600;
}
.aside-list:hover,.active{
    @apply bg-blue-50;
}
</style>
